<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../src/muugyj-ui.css">
    <title>表单元素</title>
</head>

<body>
    <div class="gy-header">
        <div class="left"><i class="fa fa-chevron-left"></i></div>
        <div class="title">我是标题</div>
        <div class="right"><i class="fa fa-ellipsis-h"></i></div>
    </div>
    <div class="gy-navbar">
      <a class="navbar-item">
          <i class="fa fa-home icon"></i>
          <span class="name">首页</span>
      </a>
      <a class="navbar-item active">
          <i class="fa fa-list icon"></i>
          <span class="name">分类</span>
      </a>
      <a class="navbar-item">
          <i class="fa fa-search icon"></i>
          <span class="name">发现</span>
      </a>
      <a class="navbar-item">
          <i class="fa fa-user-o icon"></i>
          <span class="name">我的</span>
      </a>
    </div>
    <div class="gy-content">
        <!-- 带suggest的搜索框 -->
        <div class="gy-search on-focus">
          <!-- 搜索框 -->
          <form action="#" class="gy-search-form">
            <div class="gy-search-input-wrap">
              <i class="fa fa-search gy-search-icon"></i>
              <input type="text" placeholder="搜索" autocomplete="off" required class="gy-search-input"/>
              <i class="fa fa-close gy-search-clear"></i>
            </div>
            <span class="gy-search-cancel">取消</span>
          </form>
          <!-- 搜索建议 -->
          <ul class="gy-search-suggest">
            <li class="gy-suggest-item">手机</li>
            <li class="gy-suggest-item">iPhone XS Max</li>
            <li class="gy-suggest-item">华为P30</li>
            <li class="gy-suggest-item">小米 MIX3</li>
            <li class="gy-suggest-item">诺基亚1110</li>
          </ul>
        </div>
        <p class="content">内容区</p>
    </div>
</body>

</html>